<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">
        <div class="address"></div>
        <p class="result">江苏省——南京市</p>
    </div>
    <script>
                  var allCitys = [{
                provinceName:'江苏省',
                citys:[{
                        cityName:'南京市',
                        area:[{
                            areaName:'雨花台区'},{areaName:'玄武区'},{areaName:'江宁区'}
                        ]
                    },
                    {cityName:'苏州市',
                        area:[{
                            areaName:'沧浪区'},{areaName:'平江区'},{areaName:'金阊区'}
                        ]},
                    {cityName:'镇江市',
                        area:[{
                            areaName:'京口区'},{areaName:'润州区'},{areaName:'丹徒区'}
                        ]},
                    {cityName:'无锡市',
                        area:[{
                            areaName:'崇安区'},{areaName:'南长区'},{areaName:'锡山区'}
                        ]},
                    {cityName:'连云港市',
                        area:[{
                            areaName:'海州区'},{areaName:'连云区'},{areaName:'赣榆区'}
                        ]}
                    ]
                },{
                provinceName:'安徽省',
                citys:[
                    {
                        cityName:'合肥市',
                        area:[{
                                areaName:'庐阳区'},{areaName:'蜀山区'},{areaName:'包河区'}
                            ]
                },
                    {cityName:'蚌埠市',
                        area:[{
                                areaName:'庐阳区'},{areaName:'蜀山区'},{areaName:'包河区'}
                            ]},
                    {cityName:'阜阳市',
                        area:[{
                                areaName:'庐阳区'},{areaName:'蜀山区'},{areaName:'包河区'}
                            ]},
                    {cityName:'佛州市',
                        area:[{
                                areaName:'庐阳区'},{areaName:'蜀山区'},{areaName:'包河区'}
                            ]},
                    {cityName:'宿州市',
                        area:[{
                                areaName:'庐阳区'},{areaName:'蜀山区'},{areaName:'包河区'}
                            ]}
                    ]
                },{
                provinceName:'河南省',
                citys:[
                    {
                        cityName:'郑州市',
                        area:[{
                            areaName:'中原区'},{areaName:'二七区'},{areaName:'金水区'}
                        ]
                },
                    {cityName:'许昌市',
                        area:[{
                            areaName:'中原区'},{areaName:'二七区'},{areaName:'金水区'}
                        ]},
                    {cityName:'信阳市',
                        area:[{
                            areaName:'中原区'},{areaName:'二七区'},{areaName:'金水区'}
                        ]},
                    {cityName:'平顶山市',
                        area:[{
                            areaName:'中原区'},{areaName:'二七区'},{areaName:'金水区'}
                        ]},
                    {cityName:'新乡市',
                        area:[{
                            areaName:'中原区'},{areaName:'二七区'},{areaName:'金水区'}
                        ]}
                    ]
                }
            ]
        
        var address = document.querySelector('.address');//获取列表
        var result = document.querySelector('.result');//展示元素

        // 创建省份列表
        var provinceSelect = document.createElement('select');
        address.appendChild(provinceSelect);
        for(var i=0;i<allCitys.length;i++){
            var provinceName = allCitys[i].provinceName;
            var option = document.createElement('option');
            provinceSelect.appendChild(option);
            option.innerHTML = provinceName;
        }


        // 创建市的列表
        var citySelect = document.createElement('select');
        address.appendChild(citySelect);
        updateCitys();
        function updateCitys(){
            // 先清空城市列表
            citySelect.innerHTML = '';
            var citys = allCitys[provinceSelect.selectedIndex].citys;
            for(var i=0;i<citys.length;i++){
                var cityName = citys[i].cityName;
                var option = document.createElement('option');
                citySelect.appendChild(option);
                option.innerHTML = cityName;
            }
        }

        // 创建区的下拉菜单
        var areaSelect = document.createElement('select');
        address.appendChild(areaSelect);
        updateArea();
        function updateArea(){
            areaSelect.innerHTML = '';
            var areas = allCitys[provinceSelect.selectedIndex].citys[citySelect.selectedIndex].area;
            for(var i=0;i<areas.length;i++){
                var areaName = areas[i].areaName;
                var option = document.createElement('option');
                areaSelect.appendChild(option);
                option.innerHTML = areaName;
            }
        }

        // 省份下拉类表选中事件
        provinceSelect.onchange = function(){
            updateCitys();
            updateArea();
            updateAddress();
        }
        citySelect.onchange = function(){
            updateArea();
            updateAddress();
        }
        areaSelect.onchange = function(){
            updateAddress();
        }
        function updateAddress(){
            var province = allCitys[provinceSelect.selectedIndex];//省份对象
            var provinceName = province.provinceName;//省份名字
            var city = province.citys[citySelect.selectedIndex];//市对象
            var cityName = city.cityName;//市名字   
            var area = city.area[areaSelect.selectedIndex];//区对象
            var areaName = area.areaName;//区名字
            result.innerHTML = provinceName + "——" + cityName + "——" + areaName;
        }

    </script>
</body>
</html>